<template>
    <div class="content" :style="{ 'margin-bottom': props.options.space + 'px' }">
        <div v-if="props.options.position == 1" class="space">
            <div class="line">
                <div
                    v-show="props.options.title"
                    class="title"
                    :style="{
                        color: props.options.titleColor
                    }">
                    {{ props.options.title }}
                </div>
                <div
                    class="more"
                    v-show="JSON.parse(props.options.show)"
                    @click="jump(props.options)"
                    :style="{
                        color: props.options.textColor
                    }">
                    {{ props.options.content }}
                </div>
            </div>
            <div
                class="desc"
                v-show="props.options.description"
                :style="{
                    color: props.options.descColor,
                    'padding-top': props.options.title ? '12px' : '0'
                }">
                {{ props.options.description }}
            </div>
        </div>
        <div v-else>
            <div
                class="title center"
                v-show="props.options.title"
                :style="{
                    color: props.options.titleColor
                }">
                {{ props.options.title }}
            </div>
            <div
                class="desc center"
                v-show="props.options.description"
                :style="{
                    color: props.options.descColor,
                    'padding-top': props.options.title ? '12px' : '0'
                }">
                {{ props.options.description }}
            </div>
            <div
                class="more center top"
                v-show="props.options.show && props.options.content"
                @click="jump(props.options)"
                :style="{
                    color: props.options.textColor,
                    'margin-top': props.options.description || props.options.title ? '20px' : '0'
                }">
                {{ props.options.content }}
            </div>
        </div>
    </div>
</template>
<script setup name="text">
const emit = defineEmits(['jump']);
const props = defineProps({
    options: {
        type: Object,
        default: () => {
            return {};
        }
    },
    isUniapp: {
        type: Boolean,
        default: false
    }
});
const jump = item => {
    if (props.isUniapp) {
        emit('jump', item);
    }
};
</script>
<style lang="scss" scoped>
.content {
    padding: 16px;
    background-color: #fff;
    .space {
        width: 100%;
    }
}
.center {
    text-align: center;
}
.line {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #33302d;
}
.desc {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 18px;
    padding-top: 12px;
    word-wrap: break-word;
}
.top {
    margin-top: 20px;
}
.more {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
</style>
